<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <link rel="stylesheet" type="text/css" href="/static/css/login.css">
    <script src="/static/js/jquery-3.3.1.min.js"></script>
</head>
<body>
<div  class="div1">
    <div class="div2">
        <div class="logo">
            <img id="img1" src="/static/images/zhihu.jpg" width="100%">
        </div>
        <div class="div2_1">
            <p>登录知乎，发现更大的世界</p>
        </div>
    </div>
    <div class="form1">
        <form name="form1" method="post">
            {% csrf_token %}
            <input  id="my_name" class="input1" type="text" name="name"   placeholder="邮箱号或手机号"><br>
            <input  id="my_passwd" class="input1" type="password" name="passwd"   onblur="my_blur2()"  placeholder="密码"><br>
            <p><p>
            <input class="submit1" type="submit" value="注册">
        </form>
    </div>
    <div>
        <ul class="ul1">
            <li class="li1"><a href="login">返回登录</a></li>
        </ul>
    </div>
</div>
<div id="div10">

</div>
<script>
//    $(document).ready(function () {
//        $('#input1').blur(function () {
//            $.get("http://192.168.0.123:5000",function (information) {
//                $("#div10").html(information)
//            })
//        })
//    })
    function my_blur2() {
        var my_passwd = document.getElementById("my_passwd").value;
        if (my_passwd==null||my_passwd==""){
            document.getElementById("my_passwd").setAttribute("placeholder","请输入密码")
            document.getElementById("my_passwd").className="input4"
        }
    }
    $(document).ready(function () {
        $('#my_name').blur(function () {
            var my_name = document.getElementById("my_name").value;
            if (my_name==null||my_name==""){
                    document.getElementById("my_name").setAttribute("placeholder","请输入邮箱号或者手机号")
                    document.getElementById("my_name").className="input3"
            }
            else {
                flay = true,
                $.ajax({
                    url:"http://127.0.0.1:8000/check_form", // 设置url,我这个页面数据传送给那个页面
                    type:"GET",   //                设置一个get方式传递数据
                    async:true,  //是不是异步的方式，默认为异步，异步相当于开了多线程
                    data:{
                        username:$('#my_name').val()
                    },//post和get都可以用字典的方式
                    timeout:30000, //超时时间（选填）
                    dataType:'jsonp',//返回的数据格式有:jsom/xml/html/script/text
                    //如果返回格式是json,而服务器传的格式不是json，会出错
                    jsonp:'back_jsonp',

                    beforeSend:function (xhr) {
                        console.log(xhr);
                        console.log("发送前")
                    },
                    success:function (username,textStatus,jqXHR) {
                        console.log(username);
                        if(username==0) {
//                            alert("注册")
//                            $('#my_name').val("")
                        }else if(username==1){
//                            alert("已经存在")
                            $("#my_name").val("")
                            document.getElementById("my_name").setAttribute("placeholder","该用户已经存在")
                            document.getElementById("my_name").className="input3"
                        }
                    }
                })
            }
        })
    })
</script>

</body>
</html>